<template>
  <div ref="canvas" class="RenderArea RenderArea_01_02"></div>
</template>

<script>
// 导入 Three.js 的模块
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

export default {
  mounted() {
    const canvas = this.$refs.canvas;

    const scene = new THREE.Scene();

    const camera = new THREE.PerspectiveCamera(
      75, // 相机视锥体垂直视野角度
      canvas.clientWidth / canvas.clientHeight, // 相机视锥体长宽比
      0.1, // 相机视锥体近端面距离
      1000 // 相机视锥体远端面距离
    );
    // 设置相机位置
    camera.position.z = 5;

    // 创建球体的三个参数分别为半径、水平方向上的段数和垂直方向上的段数
    // const geometry = new THREE.SphereGeometry(1, 16, 12);
    const geometry = new THREE.SphereGeometry(2, 16, 12);

    // 创建使用线的材质，这里使用红色的 MeshBasicMaterial 材质
    const material = new THREE.LineBasicMaterial({ color: 0xff0000 });

    // 创建球体的线框网格对象
    const wireframe = new THREE.WireframeGeometry(geometry);
    const line = new THREE.LineSegments(wireframe, material);

    // 将球体的线框网格对象添加到场景中
    scene.add(line);

    // 添加坐标系
    const axesHelper = new THREE.AxesHelper(10);
    scene.add(axesHelper);

    // 创建 Three.js 渲染器
    const renderer = new THREE.WebGLRenderer({ antialias: true });

    // 设置渲染器的背景色和大小
    renderer.setClearColor(0x262626);
    renderer.setSize(canvas.clientWidth, canvas.clientHeight);

    // added controls
    const controls = new OrbitControls(camera, renderer.domElement);
    controls.update();
    // 添加监听，上面的update的效果
    // controls.addEventListener('change', function () {
    //   console.log(camera.position);
    //   renderer.render(scene, camera);
    // });

    canvas.appendChild(renderer.domElement);

    function render() {
      requestAnimationFrame(render);
      renderer.render(scene, camera);
      controls.update();
    }

    render();
  },
};
</script>

<style>
/* 设置 Three.js 的渲染画布为页面宽高 */
</style>
